{include file="public/header"}
<body>
<div id="app" v-cloak>
    <div class="ht-main">
        <div class="ht-search">
            <el-form :inline="true" size="small">
                <el-form-item label="prompt">
                    <el-input v-model="searchKey.prompt" placeholder="prompt" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="ht-tool">
            <div class="ht-tool-left">
                <el-button type="success" size="mini" icon="el-icon-plus" @click="doAdd">添加</el-button>
                <el-button type="primary" :disabled="!tableSelect.length" size="mini" icon="el-icon-edit"
                           @click="doSet(tableSelect)">状态
                </el-button>
                <el-button type="danger" :disabled="!tableSelect.length" size="mini" icon="el-icon-delete"
                           @click="batchDel('/admin/ai.image/del')">删除
                </el-button>
            </div>
            <div class="ht-tool-right">
            </div>
        </div>
        <div class="ht-main-body">
            <el-table :data="tableData" border header-row-class-name="ht-table-header"
                      ref="dataTable" @selection-change="handleSelectChange">
                <el-table-column align="center" type="selection" width="39"></el-table-column>
                <el-table-column align="center" prop="id" label="ID" width="100px"></el-table-column>
                <el-table-column align="center" prop="user_id" label="user_id" width="100px"></el-table-column>
                <el-table-column prop="prompt" label="prompt"></el-table-column>
                <el-table-column align="center" prop="is_check" label="is_check"  width="100px">
                    <template slot-scope="scope">
                        <el-switch
                                @change="changeCheck(scope.row)"
                                v-model="scope.row.is_check"
                                active-color="#13ce66"
                                inactive-color="#ff4949" :inactive-value="-1"
                                :active-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="is_open" label="is_open"  width="100px">
                    <template slot-scope="scope">
                        <el-switch
                                @change="changeSwitch(scope.row)"
                                v-model="scope.row.is_open"
                                active-color="#13ce66"
                                inactive-color="#ff4949" :inactive-value="-1"
                                :active-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="store" label="store"  width="100px"></el-table-column>
                <el-table-column align="center" prop="store_type" label="store_type"  width="100px"></el-table-column>
                <el-table-column align="center" label="操作" width="160">
                    <template slot-scope="scope">
                        <el-link @click="edit(scope.row)" type="primary" >编辑</el-link>
                        <el-link @click="showImg(scope.row.cdn_url)" type="primary" >查看</el-link>
                        <el-link @click="del(scope.row)" type="danger" >删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="ht-main-page">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[1,10,20,50, 200, 300, 400]"
                        :page-size="limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <el-drawer
                    :visible.sync="is_edit"
                    size="100%"
                    :with-header="false"
                    custom-class="ht-drawer-bg"
            >
                <div class="ht-drawer-main">
                    <el-page-header @back="goBack" title="Esc返回" :content="content"></el-page-header>
                    <div class="ht-form">
                        <el-form :model="editData" label-width="120px" size="small">
                            <el-form-item label="prompt">
                                <el-input placeholder="prompt"  v-model="editData.prompt"></el-input>
                            </el-form-item>
                            <el-form-item label="图片" >
                                <el-input placeholder="图片" style="width: 70%" type="text" v-model="editData.path"></el-input>
                                <ht-upload v-model="editData.path"></ht-upload>
                            </el-form-item>
                            <el-form-item v-if="editData.path">
                                <img :src="editData.path" style="max-width: 100px;cursor: pointer" @click="showImg(editData.path)">
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-drawer>
        </div>
        <el-dialog title="设置状态" :visible.sync="showDialog" width="30%">
            <el-form size="small">
                <el-form-item>
                    <el-select v-model="editData.store_type" placeholder="请选择">
                        <el-option value="public">public</el-option>
                        <el-option value="private">private</el-option>
                        <el-option value="temp">temp</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button type="primary" @click="setSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
{include file="public/common"}
<script src="/static/elementUi/component/device.js"></script>
<script src="/static/elementUi/component/parts.js"></script>

<script>
    let vs ;
    let del_url = "{:url('ai.image/del')}";
    let add_url = "{:url('ai.image/addOrder')}";
    let index_url = "{:url('ai.image/index')}";
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                inputValue: '',
                deviceShow:false,
                partsShow:false,
                showSign: false,
                showDialog: false,
                showDoSign:false,
                showLiu:false,
                activeTab: 'first',
                tableData: [],
                is_edit: false,
                editData: {},
                editDataTemp: {},
                content: '编辑',
                total: 0,
                page: 1,
                limit: 10,
                deviceData:[],
                partsData:[],
                sizeList:["720*1280",'1024*1024','1280*720'],
                parts_list:[],
                device_list:[],
                factory_list:[],
                diggings_list:[],
                itemData:{}
            }
        },
        created: function () {
            vs = this;
            vs.getData()
        },
        methods: {
            setSubmit() {
                Api.request("{:url('ai.image/add')}",{
                    id:vs.editData.id
                    ,store_type:vs.editData.store_type
                }).then(res=>{
                    vs.getData()
                    vs.showDialog = false
                    vs.editData = {}
                })
            },
            doSet(row) {
                if (typeof row == 'object') {
                    vs.editData.id = row.map(item=>item.id)
                } else  {
                    vs.editData.id = row.id
                }
                vs.showDialog = true
            },
            changeCheck(row) {
                Api.request("{:url('ai.image/setCheck')}",{
                    id:row.id
                }).then(res=>{
                })
            },
            changeSwitch(row) {
                Api.request("{:url('ai.image/setOpen')}",{
                    id:row.id
                }).then(res=>{
                })
            },
            doSee(row) {
                Api.request("{:url('ai.order/doSee')}",{
                    id:row.id
                }).then(res=>{
                    top.showImages(res.data.images,1,res.data.order.prompt)
                })
            },
            doCreate(row) {
                Api.request("{:url('ai.order/doCreate')}",{
                    id:row.id
                }).then(res=>{
                    vs.showSuccessMsgCall(function () {
                        vs.getData()
                    })
                })
            },

            getIndex() {
                vs.getData()
            },
            onSubmit() {
                Api.request(add_url,vs.editData).then(res=>{
                    vs.showSuccessMsgCall(() => {
                        vs.is_edit = false
                        vs.getData();
                    })
                })
            },

            getData: function () {
                var that = this
                that.searchType = {
                    prompt: 'like',
                    create_time:'between time'
                }
                $.post(index_url, {
                    limit: that.limit,
                    page: that.page,
                    search_key: that.searchKey,
                    search_type: that.searchType
                }, function (res) {
                    if (res.code == 1) {
                        that.tableData = res.data.data
                        that.total = res.data.total
                    } else {
                        that.showErrorMsg(res.msg)
                    }
                })
            },
            doAdd: function () {
                this.is_edit = true
                this.content = '添加'
                this.editData = {
                    parts_info:[],
                    device_info: [],
                    sign_info:{}
                }
            },
            edit: function (data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data
            },
            goBack: function () {
                this.is_edit = false
            },
            del: function (data) {
                var that = this
                that.$confirm('确定删除么?', '提示', {
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    $.post(del_url, {id: data.id}, function (res) {
                        if (res.code == 1) {
                            that.showSuccessMsgCall(function () {
                                that.getData()
                            })
                        } else {
                            that.showErrorMsg(res.msg)
                        }
                    })
                })
            },
            handleSizeChange: function (e) {
                this.limit = e
            },
            handleCurrentChange: function (e) {
                this.page = e
            }
        },
        watch: {
            page(v) {
                this.getData()
            },
            limit() {
                this.getData()
            }
        }
    })
</script>
</body>
</html>
